<template>
  <div class="training-container">
    <a-card title="培训管理">
      <template #extra>
        <a-button type="primary" @click="showAddModal">创建培训</a-button>
      </template>

      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane key="1" tab="培训计划">
          <a-table
              :columns="planColumns"
              :data-source="trainingPlans"
              :pagination="pagination"
              row-key="id"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'status'">
                <a-tag :color="getPlanStatusColor(record.status)">
                  {{ getPlanStatusText(record.status) }}
                </a-tag>
              </template>
              <template v-if="column.key === 'action'">
                <a-space>
                  <a-button size="small" @click="viewPlan(record)">详情</a-button>
                  <a-button size="small" @click="editPlan(record)">编辑</a-button>
                  <a-button size="small" danger @click="confirmCancel(record)" v-if="record.status === 1">取消</a-button>
                </a-space>
              </template>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="培训记录">
          <div class="search-bar">
            <a-input-search
                v-model:value="searchKeyword"
                placeholder="输入培训名称搜索"
                @search="handleSearch"
                style="width: 300px"
            />
          </div>
          <a-table
              :columns="recordColumns"
              :data-source="trainingRecords"
              :pagination="recordPagination"
              row-key="id"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'result'">
                <a-tag :color="record.result === 1 ? 'green' : record.result === 2 ? 'orange' : 'red'">
                  {{ getResultText(record.result) }}
                </a-tag>
              </template>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>

      <!-- 创建培训模态框 -->
      <a-modal
          v-model:visible="trainingModalVisible"
          :title="modalTitle"
          width="800px"
          @ok="handleTrainingSubmit"
          @cancel="handleTrainingCancel"
      >
        <a-form
            :model="trainingFormState"
            :rules="trainingFormRules"
            ref="trainingFormRef"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 18 }"
        >
          <a-form-item label="培训名称" name="title">
            <a-input v-model:value="trainingFormState.title" />
          </a-form-item>
          <a-form-item label="培训类型" name="type">
            <a-select v-model:value="trainingFormState.type">
              <a-select-option value="1">入职培训</a-select-option>
              <a-select-option value="2">技能培训</a-select-option>
              <a-select-option value="3">管理培训</a-select-option>
              <a-select-option value="4">安全培训</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="培训讲师" name="lecturer">
            <a-input v-model:value="trainingFormState.lecturer" />
          </a-form-item>
          <a-form-item label="培训时间" name="timeRange">
            <a-range-picker
                v-model:value="trainingFormState.timeRange"
                show-time
                style="width: 100%"
            />
          </a-form-item>
          <a-form-item label="培训地点" name="location">
            <a-input v-model:value="trainingFormState.location" />
          </a-form-item>
          <a-form-item label="参与人员" name="participants">
            <a-select
                v-model:value="trainingFormState.participants"
                mode="multiple"
                placeholder="请选择参与人员"
            >
              <a-select-option v-for="employee in employeeList" :key="employee.id" :value="employee.id">
                {{ employee.name }} ({{ employee.department }})
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="培训内容" name="content">
            <a-textarea v-model:value="trainingFormState.content" :rows="4" />
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message, Modal } from 'ant-design-vue'

const activeTab = ref('1')
const searchKeyword = ref('')

// 培训计划表格列配置
const planColumns = [
  {
    title: '培训名称',
    dataIndex: 'title',
    key: 'title'
  },
  {
    title: '培训类型',
    dataIndex: 'type',
    key: 'type'
  },
  {
    title: '培训讲师',
    dataIndex: 'lecturer',
    key: 'lecturer'
  },
  {
    title: '培训时间',
    dataIndex: 'time',
    key: 'time'
  },
  {
    title: '参与人数',
    dataIndex: 'participantCount',
    key: 'participantCount'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '操作',
    key: 'action',
    width: '220px'
  }
]

// 培训计划数据
const trainingPlans = ref([
  { id: 1, title: '新员工入职培训', type: '入职培训', lecturer: '王老师',
    time: '2023-10-15 09:00 至 2023-10-16 17:00', participantCount: 12, status: 1 },
  { id: 2, title: '前端开发技能提升', type: '技能培训', lecturer: '张工程师',
    time: '2023-10-20 13:30 至 2023-10-22 17:00', participantCount: 8, status: 1 },
  { id: 3, title: '中层管理能力培训', type: '管理培训', lecturer: '李教授',
    time: '2023-09-05 09:00 至 2023-09-07 17:00', participantCount: 15, status: 2 },
  { id: 4, title: '信息安全意识培训', type: '安全培训', lecturer: '赵专家',
    time: '2023-08-10 14:00 至 2023-08-10 17:00', participantCount: 30, status: 3 }
])

const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 4
})

// 培训记录表格列配置
const recordColumns = [
  {
    title: '培训名称',
    dataIndex: 'title',
    key: 'title'
  },
  {
    title: '培训类型',
    dataIndex: 'type',
    key: 'type'
  },
  {
    title: '参与人员',
    dataIndex: 'participant',
    key: 'participant'
  },
  {
    title: '培训时间',
    dataIndex: 'time',
    key: 'time'
  },
  {
    title: '培训结果',
    dataIndex: 'result',
    key: 'result'
  },
  {
    title: '考核成绩',
    dataIndex: 'score',
    key: 'score'
  }
]

// 培训记录数据
const trainingRecords = ref([
  { id: 1, title: '新员工入职培训', type: '入职培训', participant: '张三',
    time: '2023-10-15 09:00 至 2023-10-16 17:00', result: 1, score: 92 },
  { id: 2, title: '前端开发技能提升', type: '技能培训', participant: '李四',
    time: '2023-10-20 13:30 至 2023-10-22 17:00', result: 1, score: 88 },
  { id: 3, title: '中层管理能力培训', type: '管理培训', participant: '王五',
    time: '2023-09-05 09:00 至 2023-09-07 17:00', result: 2, score: 75 },
  { id: 4, title: '信息安全意识培训', type: '安全培训', participant: '赵六',
    time: '2023-08-10 14:00 至 2023-08-10 17:00', result: 3, score: 60 }
])

const recordPagination = ref({
  current: 1,
  pageSize: 10,
  total: 4
})

// 员工列表
const employeeList = ref([
  { id: 1, name: '张三', department: '技术部' },
  { id: 2, name: '李四', department: '技术部' },
  { id: 3, name: '王五', department: '产品部' },
  { id: 4, name: '赵六', department: '市场部' },
  { id: 5, name: '钱七', department: '财务部' }
])

// 获取计划状态文本
const getPlanStatusText = (status) => {
  const statusMap = {
    1: '未开始',
    2: '进行中',
    3: '已完成',
    4: '已取消'
  }
  return statusMap[status] || '未知'
}

// 获取计划状态颜色
const getPlanStatusColor = (status) => {
  const colorMap = {
    1: 'blue',
    2: 'orange',
    3: 'green',
    4: 'red'
  }
  return colorMap[status] || 'default'
}

// 获取结果文本
const getResultText = (result) => {
  const resultMap = {
    1: '优秀',
    2: '合格',
    3: '不合格'
  }
  return resultMap[result] || '未知'
}

// 查看计划
const viewPlan = (record) => {
  console.log('查看培训计划:', record)
}

// 编辑计划
const editPlan = (record) => {
  modalTitle.value = '编辑培训计划'
  trainingFormState.value = {
    id: record.id,
    title: record.title,
    type: record.type === '入职培训' ? '1' :
        record.type === '技能培训' ? '2' :
            record.type === '管理培训' ? '3' : '4',
    lecturer: record.lecturer,
    timeRange: null, // 实际项目中应该转换时间格式
    location: record.location || '',
    participants: record.participants || [],
    content: record.content || ''
  }
  trainingModalVisible.value = true
}

// 确认取消计划
const confirmCancel = (record) => {
  Modal.confirm({
    title: '确认取消培训',
    content: `确定要取消培训"${record.title}"吗？`,
    okText: '确认',
    cancelText: '取消',
    onOk() {
      handleCancelPlan(record.id)
    }
  })
}

// 处理取消计划
const handleCancelPlan = (id) => {
  const index = trainingPlans.value.findIndex(item => item.id === id)
  if (index !== -1) {
    trainingPlans.value[index].status = 4
    message.success('培训计划已取消')
  }
}

// 搜索
const handleSearch = () => {
  console.log('搜索培训记录:', searchKeyword.value)
}

// 培训模态框相关
const trainingModalVisible = ref(false)
const modalTitle = ref('创建培训计划')
const trainingFormState = ref({
  id: null,
  title: '',
  type: '1',
  lecturer: '',
  timeRange: null,
  location: '',
  participants: [],
  content: ''
})
const trainingFormRules = {
  title: [{ required: true, message: '请输入培训名称' }],
  type: [{ required: true, message: '请选择培训类型' }],
  lecturer: [{ required: true, message: '请输入培训讲师' }],
  timeRange: [{ required: true, message: '请选择培训时间' }],
  location: [{ required: true, message: '请输入培训地点' }]
}

// 显示添加模态框
const showAddModal = () => {
  modalTitle.value = '创建培训计划'
  trainingFormState.value = {
    id: null,
    title: '',
    type: '1',
    lecturer: '',
    timeRange: null,
    location: '',
    participants: [],
    content: ''
  }
  trainingModalVisible.value = true
}

// 提交培训表单
const handleTrainingSubmit = () => {
  if (trainingFormState.value.id) {
    // 编辑
    const index = trainingPlans.value.findIndex(item => item.id === trainingFormState.value.id)
    if (index !== -1) {
      trainingPlans.value[index] = {
        ...trainingPlans.value[index],
        title: trainingFormState.value.title,
        type: trainingFormState.value.type === '1' ? '入职培训' :
            trainingFormState.value.type === '2' ? '技能培训' :
                trainingFormState.value.type === '3' ? '管理培训' : '安全培训',
        lecturer: trainingFormState.value.lecturer,
        time: trainingFormState.value.timeRange ?
            `${trainingFormState.value.timeRange[0].format('YYYY-MM-DD HH:mm')} 至 ${trainingFormState.value.timeRange[1].format('YYYY-MM-DD HH:mm')}` : '',
        participantCount: trainingFormState.value.participants.length,
        status: 1,
        location: trainingFormState.value.location,
        content: trainingFormState.value.content
      }
    }
    message.success('培训计划更新成功')
  } else {
    // 新增
    const newId = Math.max(...trainingPlans.value.map(item => item.id)) + 1
    trainingPlans.value.push({
      id: newId,
      title: trainingFormState.value.title,
      type: trainingFormState.value.type === '1' ? '入职培训' :
          trainingFormState.value.type === '2' ? '技能培训' :
              trainingFormState.value.type === '3' ? '管理培训' : '安全培训',
      lecturer: trainingFormState.value.lecturer,
      time: trainingFormState.value.timeRange ?
          `${trainingFormState.value.timeRange[0].format('YYYY-MM-DD HH:mm')} 至 ${trainingFormState.value.timeRange[1].format('YYYY-MM-DD HH:mm')}` : '',
      participantCount: trainingFormState.value.participants.length,
      status: 1,
      location: trainingFormState.value.location,
      content: trainingFormState.value.content,
      participants: trainingFormState.value.participants
    })
    message.success('培训计划创建成功')
  }
  trainingModalVisible.value = false
}

// 取消培训表单
const handleTrainingCancel = () => {
  trainingModalVisible.value = false
}
</script>

<style scoped>
.training-container {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
}
</style>